<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Folders, addFolder, updateFolder, delFolder } from '@/utils/api.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import wlsPopup from '@/components/common/wls-popup.vue'
let sbsxg = true;
let xgid = '';
const router = useRouter();
const ruleFormRef = ref(null);
const fol = ref([]);
const issta = ref(false);
const ruleForm = ref({
    name: ''
});
const rules = reactive({
    name: [
        {
            required: true,
            message: '请填写收藏夹名称',
            trigger: 'blur',
        },
    ]
});

const getFolders = async () => {
    let params = '?areaId=' + areaId + '&mobile=' + mobile;
    let res = await Folders(params);
    if (res.code == '200') {
        fol.value = res.data;
    }
}

const gorede = (data) => {
    let name = data.folderName, speciesid = data.id;
    router.push({ path: '/favorite/details', query: { name: name, speciesid: speciesid } })
}

const openstr = () => {
    sbsxg = true;
    resetForm(ruleFormRef.value)
    issta.value = true;
}

const xgfn = (data) => {
    sbsxg = false;
    xgid = data.id;
    ruleForm.value.name = JSON.parse(JSON.stringify(data.folderName));
    issta.value = true;
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // emit('submitfl', ruleForm.value.name)
            if (sbsxg) {
                let params = {
                    "areaId": areaId,
                    "folderName": ruleForm.value.name,
                    "mobile": mobile
                }
                addFolder(params).then(res => {
                    if (res.code == '200') {
                        getFolders();
                        resetForm(ruleFormRef.value);
                        ElMessage({
                            type: 'success',
                            message: '保存成功',
                        })
                    }
                })
            } else {
                let params = {
                    "id": xgid,
                    "folderName": ruleForm.value.name
                }
                updateFolder(params).then(res => {
                    if (res.code == '200') {
                        getFolders();
                        resetForm(ruleFormRef.value);
                        ElMessage({
                            type: 'success',
                            message: '保存成功',
                        })
                    }
                })
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields();
    issta.value = false
}

const del = (dataid) => {
    ElMessageBox.confirm(
        '删除收藏集同时也会移除收藏夹中内容',
        '确定删除该收藏夹吗？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delFolder(dataid).then(res => {
                if (res.code == '200') {
                    ElMessage({
                        type: 'success',
                        message: '删除成功'
                    })
                    getFolders();
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

let areaId = '', mobile = '';
onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    mobile = window.sessionStorage.getItem('mobile');
    getFolders()
})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title" style="justify-content: space-between;">
            <div style="font-weight: 700;"><span>收藏夹</span></div>
            <div style="display: flex;align-items: center;cursor: pointer;">
                <!-- <svg class="wls-icon" aria-hidden="true">
                    <use xlink:href="#icon-tianjia1"></use>
                </svg> -->
                <i style="color: var(--wls-color);" class="icon iconfont icon-tianjia1"></i>
                <span @click.stop="openstr()" style="margin-left: 0.08rem;" class="wls-list-span wlsc">新建收藏夹</span>
            </div>
        </div>
        <div class="wls-aut-container">
            <div class="bcb">
                <table>
                    <thead>
                        <tr style="border: none;">
                            <th>收藏夹名称</th>
                            <th>创建时间 </th>
                            <th>文件数量 </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(i, x) in fol" :key="i.id">
                            <td>{{ i.folderName }}</td>
                            <td>{{ i.createTime }}</td>
                            <td>{{ i.starsCount }}</td>
                            <td>
                                <span @click="gorede(i)" style="color: var(--wls-color);margin-right: 0.16rem;">查看</span>
                                <span @click.stop="xgfn(i)" style="color: var(--wls-color);margin-right: 0.16rem;">修改</span>
                                <span style="color:#F84848;" @click.stop="del(i.id)">删除</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <wls-popup v-if="issta">
            <div class="wls-u">
                <div class="d-lkb-c">
                    <!-- <svg class="wls-icon" aria-hidden="true" style="width: .4rem;height: 0.4rem;">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg> -->
                    <i class="icon iconfont icon-guanbi" style="font-size: .2rem;" @click.stop="resetForm(ruleFormRef)"></i>
                </div>
                <div class="wls-info-title">
                    <div></div>
                    <div><span>新建收藏夹</span></div>
                </div>
                <div style="height: 0.16rem;"></div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" class="demo-ruleForm"
                    size="large">

                    <el-form-item label="收藏夹名称" prop="name">
                        <el-input style="width: 100%;" placeholder="请输入收藏夹名称" v-model="ruleForm.name" />
                    </el-form-item>
                </el-form>
                <div style="margin: 0.16rem 0;display: flex;align-items: center;justify-content: center;">
                    <el-button type="primary" @click.stop="submitForm(ruleFormRef)">保存</el-button>
                    <el-button @click.stop="resetForm(ruleFormRef)">取消</el-button>
                </div>
            </div>
        </wls-popup>
    </div>
</template>
<style scoped>
.wls-u {
    width: 7rem;
    padding: .24rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

th,
td {
    width: 25%;
}
</style>